<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>side telescopic navigation bar</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="shell dark">
        <a href="#" class="box"> <img src="./assets/filter-left.svg" alt=""/> <span class="name"> List </span> </a>
        <a href="#" class="box"> <img src="./assets/house.svg" alt=""> <span class="name"> Warehouse </span> </a>
        <a href="#" class="box"> <img src="./assets/cart3.svg" alt=""> <span class="name"> Cart </span></a>
        <a href="#" class="box"> <img src="./assets/palette.svg" alt=""> <span class="name"> Palette </span> </a>
        <a href="#" class="box"> <img src="./assets/image.svg" alt=""> <span class="name"> Picture </span> </a>
        <a href="#" class="box"> <img src="./assets/easel.svg" alt=""> <span class="name"> Easel </span> </a>
        <a href="#" class="box"> <img src="./assets/upc-scan.svg" alt=""> <span class="name"> QR code </span> </a>
        <a href="#" class="box"> <img src="./assets/shield-check.svg" alt=""> <span class="name"> Authentic </span> </a>
        <a href="#" class="box"> <img src="./assets/box-arrow-right.svg" alt=""> <span class="name"> Cancellation </span> </a>
    </div>

    <div class="shell light">
        <a href="#" class="box"> <img src="./assets/filter-left.svg" alt=""/> <span class="name"> List </span> </a>
        <a href="#" class="box"> <img src="./assets/house.svg" alt=""> <span class="name"> Warehouse </span> </a>
        <a href="#" class="box"> <img src="./assets/cart3.svg" alt=""> <span class="name"> Cart </span></a>
        <a href="#" class="box"> <img src="./assets/palette.svg" alt=""> <span class="name"> Palette </span> </a>
        <a href="#" class="box"> <img src="./assets/image.svg" alt=""> <span class="name"> Picture </span> </a>
        <a href="#" class="box"> <img src="./assets/easel.svg" alt=""> <span class="name"> Easel </span> </a>
        <a href="#" class="box"> <img src="./assets/upc-scan.svg" alt=""> <span class="name"> QR code </span> </a>
        <a href="#" class="box"> <img src="./assets/shield-check.svg" alt=""> <span class="name"> Authentic </span> </a>
        <a href="#" class="box"> <img src="./assets/box-arrow-right.svg" alt=""> <span class="name"> Cancellation </span> </a>
    </div>
</body>
</html>
